<template>
    <div class="contanier">
        <!-- 搜索条 -->
        <search-bar></search-bar>
        <!-- 轮播图 -->
        <swiper indicator-dots autoplay interval=2000 circular>
            <swiper-item v-for="(item,index) in swiperData" :key="index">
                <image :src="item.image_src" lazy-load></image>
            </swiper-item>
        </swiper>
        <!-- 菜单 -->
        <div class="menu">
            <div class="menu-item" v-for="(item,index) in menuData" :key="index">
                <image :src="item.image_src" lazy-load></image>
            </div>
        </div>
        <!-- 商品列表   楼层数据 -->
        <!-- <div class="floor" v-for="(item,index) in floorData" :key="index"> -->
        <div class="floor" v-for="(item,index) in floordata1" :key="index">
            <!-- 商品标题 -->
            <div class="floor-title">
                <image :src="item.floor_title.image_src" lazy-load></image>
            </div>
            <!-- 商品列表 -->
            <div class="floor-content">
                <!-- 左侧图片 -->
                <div class="left">
                    <!-- <image :src="item.product_list[0].image_src"></image> -->
                    <image :src="item.leftImagePath" lazy-load></image>
                </div>
                <!-- 右侧图片列表 -->
                <div class="right">
                    <!-- <image v-if="i>0" v-for="(img,i) in item.product_list" :key="i" :src="img.image_src"></image> -->
                    <image lazy-load :key='i' v-for='(img,i) in item.product_list' :src="img.image_src"></image>
                </div>
            </div>
        </div>
        <!-- 回到顶部 -->
        <div class="top" @click="toTop" v-show="isShow">
            ∧
            <p>顶部</p>
        </div>
    </div>
</template>
<script>
import request from "../../utils/request.js"
import SearchBar from "../../components/SearchBar"
export default {
    components:{
        "search-bar":SearchBar
    },
    computed: {
        floordata1: function () {
            return this.floordata.map(item=>{
                item.leftImagePath = item.product_list[0].image_src
                item.product_list = item.product_list.filter((item,index)=>{
                    return index > 0
                })
                return item
            })
        }
    },
    data(){
        return {
           swiperData:[] ,
           menuData:[],
           floordata:[],
           isShow:false
        }
    },
    // created() {
    //     mpvue.request({
    //         url:"https://www.zhengzhicheng.cn/api/public/v1/home/swiperdata",
    //         method:"get",
    //         success:(res)=>{
    //             console.log(res)
    //             this.swiperData=res.data.message
    //         }
    //     })
    //     mpvue.request({
    //         url:"https://www.zhengzhicheng.cn/api/public/v1/home/catitems",
    //         method:"get",
    //         success:(res)=>{
    //             console.log(res)
    //             this.menuData=res.data.message
    //         }
    //     })
    // },
    methods: {
        async initData(){
            let swiperRes = await request("home/swiperdata")
            this.swiperData = swiperRes.data.message
            let menuRes = await request("home/catitems")
            this.menuData = menuRes.data.message
            let floorRes = await request("home/floordata")
            this.floordata = floorRes.data.message
        }, 
        // 回到顶部
        toTop(){
            wx.pageScrollTo({
                scrollTop: 0,
                duration: 300
            })
        }   
    },
    created() {
        this.initData()
    },
    // 下拉刷新时 触发的函数
    onPullDownRefresh(){
        this.initData()
    },
    // 页面滚动时触发
    onPageScroll(param){
        // console.log(param)  //{scrollTop:1} 滚动的距离(到顶部)
        this.isShow = param.scrollTop > 50
    },
    // created() {
    //     request("home/swiperdata")
    //         .then(res=>{
    //         this.swiperData=res.data.message
    //     })
    //     request("home/catitems")
    //         .then(res=>{
    //         this.menuData=res.data.message
    //     })
    // },
}
</script>
<style scope lang="less">
    @import "main.less";
</style>